<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <!--  引入bootstrap的css资源文件  -->
    <link href="static/bootstrap-3.4.1-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <!--  引入jquery的js资源文件【jquery资源文件要在所有的js资源文件之前】  -->
    <script type="text/javascript" src="static/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <!--  引入bootstrap的js资源文件  -->
    <script type="text/javascript" src="static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        // 使用ajax进行用户信息查询
        function doQuery() {
            // 使用ajax进行查询
            $.ajax({
                type: "POST", // 请求类型： form表单的method属性
                url: "ServletUserinfoQuery", // 请求的url路径， 等价于 from表单的 action属性
                data: $("#queryForm").serialize(), // 等价于form表单的数据串，例如："name=John&location=Boston"
                dataType: "json", // 服务器返回的数据类型
                success: function (data) {  // 成功之后的回调函数 等价于ajax引擎的onreadystatechange事件的成功状态
                    // data参数就是服务器返回的数据 等价于 ajax引擎 responseText
                    //console.log("ddddddddddd:")
                    //console.log(data)
                    // 解析服务器发回的json对象，并将其内容显示到当前页面的表格中
                    // 遍历data数据集
                    if (data) {
                        // 拼接显示串
                        var strMsg = "";
                        // jquery提供的each函数进行遍历
                        $.each(data, function (index, eachRow) {
                            console.log("eachRow:")
                            console.log(eachRow.userName)

                            strMsg += "<tr>";
                            strMsg += "  <th scope='row'>" + (index + 1) + "</th>";
                            strMsg += "   <td>" + eachRow.userName + "</td>";
                            strMsg += "   <td>" + eachRow.userAddress + "</td>";
                            strMsg += "   <td>" + eachRow.userTel + "</td>";
                            strMsg += "   <td>" + eachRow.userBirthday + "</td>";
                            strMsg += "   <td>" + eachRow.userRegDate + "</td>";
                            strMsg += "</tr>";
                        });
                        // 使用dom操作将拼接的结果显示字符串，赋值给 显示的表格对象
                        $("#showData").html(strMsg);
                    }
                },
                error: function () {
                    alert("查询失败！");
                }
            });
        }
    </script>
</head>
<body>
<div style="padding-top: 30px;">
    <form id="queryForm" class="form-horizontal" action="ServletUserLogin" method="post">

        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入用户名">
            </div>

            <label class="col-sm-2 control-label">地址</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="userAddress" name="userAddress" placeholder="请输入地址">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">电话</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" id="userTel" name="userTel" placeholder="请输入电话">
            </div>

            <label class="col-sm-2 control-label">出生日期</label>
            <div class="col-sm-3">
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userBirthday" name="userBirthday" placeholder="开始日期">
                </div>
                <div class="col-sm-2">
                    -
                </div>
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userBirthday2" name="userBirthday2"
                           placeholder="截至日期">
                </div>

            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">注册日期</label>
            <div class="col-sm-3">
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userRegDate" name="userRegDate" placeholder="开始日期">
                </div>
                <div class="col-sm-2">
                    -
                </div>
                <div class="col-sm-5">
                    <input type="date" class="form-control" id="userRegDate2" name="userRegDate2" placeholder="截至日期">
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-3">
                <button type="button" class="btn btn-default" onclick="doQuery()">查询</button>
            </div>
        </div>
    </form>
</div>
<div>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>地址</th>
            <th>电话</th>
            <th>出生日期</th>
            <th>注册日期</th>
        </tr>
        </thead>
        <tbody id="showData">

        </tbody>
    </table>
</div>
</body>
</html>